/*
 * @Copyright: Copyright (C) AMCAX, All rights reserved.
 * @Author: 殷建峰
 * @Date: 2024-03-28 09:33:17
 * @LastEditTime: 2025-03-04 19:08:24
 * @LastEditors: 殷建峰
 * @Description:
 */
// import { EVENTS, ctx2 } from '@/Context2';
// import { DeleteOutlined, EditOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { userEvents } from '@app-base/module';
import { Delete, Edit, PlayArrow } from '@mui/icons-material';
import { Box, ButtonGroup, IconButton } from '@mui/material';
import { Popconfirm } from 'antd';
import React from 'react';
import { CommandView } from '.';
import { CommandEditDialog } from '../dialogs';
import { AI_EVENTS } from '../events';
// import Popconfirm from '@/components/Popconfirm';

export default (props: any) => {
  const dialogRef = React.createRef<any>();

  const handleDelete = () => {
    userEvents.emit(AI_EVENTS.AI_ITEM_DELETE, props.item);
    // events.emit(ChatEvents.OnItemDelete, props.item)
  };
  const handleExecute = () => {
    // ctx2.emit(EVENTS.AI_COMMAND_EXECUTE, props.item)
    userEvents.emit(AI_EVENTS.AI_COMMAND_EXECUTE, props.item);
    // events.emit(ChatEvents.OnCommandExecute, props.item)
  };

  const Footer = () => {
    return (
      <Box
        sx={{
          width: '100%',
          display: 'flex',
          justifyContent: 'flex-end',
          padding: '4px 0px',
        }}
      >
        <ButtonGroup size='small'>
          <Popconfirm
            title='是否删除?'
            onConfirm={handleDelete}
            okText='删除'
            cancelText='取消'
          >
            <IconButton size='small'>
              <Delete fontSize='small' />
            </IconButton>
          </Popconfirm>
          <IconButton
            size='small'
            onClick={() => showEditDialog()}
          >
            <Edit fontSize='small' />
          </IconButton>
          <Popconfirm
            title='是否执行?'
            onConfirm={handleExecute}
            okText='执行'
            cancelText='取消'
          >
            <IconButton size='small'>
              <PlayArrow fontSize='small' />
            </IconButton>
          </Popconfirm>
        </ButtonGroup>
      </Box>
    );
  };

  const showEditDialog = () => {
    dialogRef.current.show();
  };

  return (
    <>
      <CommandEditDialog
        onRef={dialogRef}
        item={props.item}
      />
      <Box
        sx={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Box
          sx={{
            padding: '10px',
            borderRadius: '5px',
            backgroundColor: '#dddddd',
          }}
        >
          <CommandView item={props.item} />
        </Box>
        <Footer />
      </Box>
    </>
  );
};
